<template>
    <div class="header">
        <div class="title">
            <span>{{headerTitle}}</span>
        </div>
        <div class="menu">
            <span @click="menuAction(0)" class="menu-item">首页</span> |
            <span @click="menuAction(1)" class="menu-item">入沈人员</span> |
            <span @click="menuAction(2)" class="menu-item">隔离人员</span> |
            <span @click="menuAction(9)" class="menu-item">北京分流</span> |
            <span @click="menuAction(4)" class="menu-item">密接人员</span> |
            <span @click="menuAction(5)" class="menu-item">确诊和无症状</span> |
            <span @click="menuAction(6)" class="menu-item">宾馆总数</span> |
            <span @click="menuAction(7)" class="menu-item">核酸检测</span> |
            <span @click="menuAction(3)" class="menu-item">转运人员</span>
<!--            <span @click="menuAction(8)" class="menu-item">预警提示</span>-->
        </div>

        <Modal footer-hide title="预警提示"
        v-model="modal1">
            <dlq-warning></dlq-warning>
        </Modal>
    </div>
</template>

<script>
import DlqWarning from '@/components/warning'

export default {
  components: { DlqWarning },
  name: 'StatisticsHeader',
  props: {
    headerTitle: {
      type: String,
      default: () => {
        return '数 据 库'
      }
    }
  },
  data () {
    return {
      btnLoading: false,
      formItem: {},
      categoryObj: {},
      modal1: false
    }
  },
  methods: {
    menuAction (val) {
      if (val.toString() === '8') {
        this.modal1 = true
        return
      }

      let name = ''
      switch (val) {
        case 0:
          name = 'login-v3'
          break
        case 1:
          name = 'statImmigrationChart'
          break
        case 2:
          name = 'statIsolationChart'
          break
        case 3:
          name = 'statTransportChart'
          break
        case 4:
          name = 'statCloseContactChart'
          break
        case 5:
          name = 'statConfirmedAsymptomaticChart'
          break
        case 6:
          name = 'statIsolationHotelChart'
          break
        case 7:
          name = 'statNucleicAcidDetectionChart'
          break
        case 9:
          name = 'statBjShuntChart'
          break
        case 10:
          name = ''
          break
      }
      this.$router.push({ name: name })
    }
  },
  mounted () {},
  watch: {},
  computed: {}
}
</script>

<style scoped>
    .header {
        background-color: #052f6b;
        color: white;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 20px;
    }
    .title {
        /*border-left: 7px solid darkred;*/
        font-size: 18px;
        font-weight: 700;
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
    }
    .title span {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin: 0 3px;
    }

    .menu {
        /*border: 1px solid white;*/
        border-radius: 5px;
        padding: 8px 20px;
        font-size: 18px;
    }

    .menu-item {
        cursor: pointer;
    }
</style>
